<html>
    <head>
        <title>WebRTCommTestWebApp</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./jain-sip.js" type="text/javascript"></script> 
        <script src="./WebRTComm.js" type="text/javascript"></script>     
        <script src="./WebRTCommTestWebAppController.js" type="text/javascript" ></script>
        <script src="./WebRTCommTestWebAppCookie.js" type="text/javascript" ></script>
        <script type='text/javascript'>	 
            webRTCommTestWebAppController=new WebRTCommTestWebAppController(this);
			
            webRTCommTestWebAppCookie = new WebRTCommTestWebAppCookie();
            webRTCommTestWebAppCookie.addElementIdInCookie("sipDisplayName");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipUserName");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipLogin");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipPassword");
            webRTCommTestWebAppCookie.addElementIdInCookie("useStunServerCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("stunServer");
            webRTCommTestWebAppCookie.addElementIdInCookie("useTurnServerCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("turnServer");
            webRTCommTestWebAppCookie.addElementIdInCookie("turnLogin");
            webRTCommTestWebAppCookie.addElementIdInCookie("turnPassword");
            webRTCommTestWebAppCookie.addElementIdInCookie("forceTurnMediaRelayCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipOutboundProxy");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipDomain");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipUriContactParameters");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipUserAgentCapabilities");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipUserAgent");		
            webRTCommTestWebAppCookie.addElementIdInCookie("sipContact");
            webRTCommTestWebAppCookie.addElementIdInCookie("sipRegistrationCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("audioMediaCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("videoMediaCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("messageMediaCkeckBox");
            webRTCommTestWebAppCookie.addElementIdInCookie("audioCodecsFilter");
            webRTCommTestWebAppCookie.addElementIdInCookie("videoCodecsFilter");
            webRTCommTestWebAppCookie.addElementIdInCookie("localVideoFormat");
            webRTCommTestWebAppCookie.addElementIdInCookie("localAudioFormat");
            webRTCommTestWebAppCookie.addElementIdInCookie("opusFmtpCodecsParameters");
            webRTCommTestWebAppCookie.addElementIdInCookie("dtlsSrtpKeyAgreementCkeckBox");

            function enableConnectButton() 
            {
                document.getElementById("connectButton").disabled=false;
            }
    
            function disableConnectButton() 
            {
                document.getElementById("connectButton").disabled=true;
            }

            function enableDisconnectButton() 
            {
                document.getElementById("disconnectButton").disabled=false;
            }
    
            function disableDisconnectButton() 
            {
                document.getElementById("disconnectButton").disabled=true;
            }
 
            function  enableCallButton() 
            {
                document.getElementById("callButton").disabled=false;
            }
    
            function disableCallButton() 
            {
                document.getElementById("callButton").disabled=true;
            }

            function enableEndCallButton() 
            {
                document.getElementById("endCallButton").disabled=false;
                //document.getElementById("stopVideoStreamButton").disabled=false;
                
                document.getElementById("muteLocalAudioCheckBox").checked=false;
                document.getElementById("hideLocalVideoCheckBox").checked=false;
                document.getElementById("muteRemoteAudioCheckBox").checked=false;
                document.getElementById("hideRemoteVideoCheckBox").checked=false;
                
                document.getElementById("muteLocalAudioCheckBox").disabled=false;
                document.getElementById("hideLocalVideoCheckBox").disabled=false;
                document.getElementById("muteRemoteAudioCheckBox").disabled=false;
                document.getElementById("hideRemoteVideoCheckBox").disabled=false;
            }
    
            function disableEndCallButton() 
            {
                document.getElementById("endCallButton").disabled=true;
                // document.getElementById("stopVideoStreamButton").disabled=true;
                
                document.getElementById("muteLocalAudioCheckBox").disabled=true;
                document.getElementById("hideLocalVideoCheckBox").disabled=true;
                document.getElementById("muteRemoteAudioCheckBox").disabled=true;
                document.getElementById("hideRemoteVideoCheckBox").disabled=true;
                
                document.getElementById("muteLocalAudioCheckBox").checked=false;
                document.getElementById("hideLocalVideoCheckBox").checked=false;
                document.getElementById("muteRemoteAudioCheckBox").checked=false;
                document.getElementById("hideRemoteVideoCheckBox").checked=false;
            }

            function enableAcceptCallButton() 
            {
                document.getElementById("acceptCallButton").disabled=false;
            }
    
            function disableAcceptCallButton() 
            {
                document.getElementById("acceptCallButton").disabled=true;
            }

            function enableRejectCallButton() 
            {
                document.getElementById("rejectCallButton").disabled=false;
            }
    
            function disableRejectCallButton() 
            {
                document.getElementById("rejectCallButton").disabled=true;
            }

            function enableCancelCallButton() 
            {
                document.getElementById("cancelCallButton").disabled=false;
            }
    
            function disableCancelCallButton() 
            {
                document.getElementById("cancelCallButton").disabled=true;
            }

            function disableStopVideoButton() 
            {
                document.getElementById("stopVideoButton").disabled=true;
            }

            function enableStopVideoButton() 
            {
                document.getElementById("stopVideoButton").disabled=false;
            }
            
            function enableSendMessageButton() 
            {
                document.getElementById("sendMessageButton").disabled=false;
                document.getElementById("messageTextArea").disabled=false;
            }
    
            function disableSendMessageButton() 
            {
                document.getElementById("sendMessageButton").disabled=true;
                document.getElementById("messageTextArea").disabled=true;
            }
            
            function showLocalVideo() 
            {
                document.getElementById("localVideo").disabled=true;
            }

            function hideLocalVideo() 
            {
                document.getElementById("localVideo").disabled=true;
            }

            function showRemoteVideo() 
            {
                document.getElementById("remoteVideo").style.visibility = "visible";
            }

            function hideRemoteVideo()
            {
                document.getElementById("remoteVideo").style.visibility = "hidden";
            }

            function playLocalVideo(localMediaStream) 
            {
                if(typeof navigator.webkitGetUserMedia != 'undefined')
                {     
                    document.getElementById("localVideo").src=webkitURL.createObjectURL(localMediaStream);
                }
                else if(typeof navigator.mozGetUserMedia != 'undefined')
                {
                    document.getElementById("localVideo").mozSrcObject=localMediaStream;
                }
                document.getElementById("localVideo").muted=true;
                document.getElementById("localVideo").play();
            }


            function stopLocalVideo() 
            {
                document.getElementById("localVideo").pause();
                if(typeof navigator.webkitGetUserMedia != 'undefined')
                {     
                    document.getElementById("localVideo").src=null;
                }
                else if(typeof navigator.mozGetUserMedia != 'undefined')
                {
                    document.getElementById("localVideo").mozSrcObject=null;
                }
            }

            function playRemoteVideo(remoteMediaStream) 
            {
                if(typeof navigator.webkitGetUserMedia != 'undefined')
                {     
                    document.getElementById("remoteVideo").src=webkitURL.createObjectURL(remoteMediaStream);
                }
                else if(typeof navigator.mozGetUserMedia != 'undefined')
                {
                    document.getElementById("remoteVideo").mozSrcObject=remoteMediaStream;
                }
                document.getElementById("remoteVideo").play();
            }


            function stopRemoteVideo() 
            {
                document.getElementById("remoteVideo").pause();
                if(typeof navigator.webkitGetUserMedia != 'undefined')
                {     
                    document.getElementById("remoteVideo").src=undefined;
                }
                else if(typeof navigator.mozGetUserMedia != 'undefined')
                {
                    document.getElementById("remoteVideo").mozSrcObject=undefined;
                }
            }

            function playRemoteAudio(remoteMediaStream) 
            {
                if(typeof navigator.webkitGetUserMedia != 'undefined')
                {     
                    document.getElementById("remoteAudio").src=webkitURL.createObjectURL(remoteMediaStream);
                }
                else if(typeof navigator.mozGetUserMedia != 'undefined')
                {
                    document.getElementById("remoteAudio").mozSrcObject=remoteMediaStream;
                }
                document.getElementById("remoteAudio").play();         
            }
            
            function stopRemoteAudio() 
            {
                document.getElementById("remoteAudio").pause();
                if(typeof navigator.webkitGetUserMedia != 'undefined')
                {     
                    document.getElementById("remoteAudio").src=undefined;
                }
                else if(typeof navigator.mozGetUserMedia != 'undefined')
                {
                    document.getElementById("remoteAudio").mozSrcObject=undefined;
                }
            }
            
            function playRinging(remoteMediaStream) 
            {
                document.getElementById("ringing").play();
            }

            function stopRinging() 
            {
                document.getElementById("ringing").pause();
            }
            
            function uncheckSipRegisterMode() 
            {
                document.getElementById("sipRegistrationCkeckBox").checked=false;
            }

            function checkSipRegisterMode() 
            {
                document.getElementById("sipRegistrationCkeckBox").checked=true;
            }

            function uncheckAudioMediaCheckBox() 
            {
                document.getElementById("audioMediaCkeckBox").checked=false;
            }

            function checkAudioMediaCheckBox() 
            {
                document.getElementById("audioMediaCkeckBox").checked=true;
            }

            function uncheckVideoMediaCheckBox() 
            {
                document.getElementById("videoMediaCkeckBox").checked=false;
            }

            function checkVideoMediaCheckBox() 
            {
                document.getElementById("videoMediaCkeckBox").checked=true;
            }
            function uncheckAudioMediaCheckBox() 
            {
                document.getElementById("audioMediaCkeckBox").checked=false;
            }

            function checkAudioMediaCheckBox() 
            {
                document.getElementById("audioMediaCkeckBox").checked=true;
            }

            function uncheckMessageMediaCheckBox() 
            {
                document.getElementById("messageMediaCkeckBox").checked=false;
            }

            function checkMessageMediaCheckBox() 
            {
                document.getElementById("messageMediaCkeckBox").checked=true;
            }
            
            
            function uncheckDtlsSrtpKeyAgreementCheckBox() 
            {
                document.getElementById("dtlsSrtpKeyAgreementCkeckBox").checked=false;
            }

            function checkDtlsSrtpKeyAgreementCheckBox() 
            {
                document.getElementById("dtlsSrtpKeyAgreementCkeckBox").checked=true;
            }
               
            function uncheckUseStunServerCkeckBox() 
            {
                document.getElementById("useStunServerCkeckBox").checked=false;
            }

            function checkUseStunServerCkeckBox() 
            {
                document.getElementById("useStunServerCkeckBox").checked=true;
            }
            
            function uncheckUseTurnServerCkeckBox() 
            {
                document.getElementById("useTurnServerCkeckBox").checked=false;
            }

            function checkUseTurnServerCkeckBox() 
            {
                document.getElementById("useTurnServerCkeckBox").checked=true;
            }
            
            function uncheckForceTurnMediaRelayCkeckBox() 
            {
                document.getElementById("forceTurnMediaRelayCkeckBox").checked=false;
            }

            function checkForceTurnMediaRelayCkeckBox() 
            {
                document.getElementById("forceTurnMediaRelayCkeckBox").checked=true;
            }
           
            function setStunServerTextInputValue(value) 
            {
                document.getElementById("stunServer").value=value;
            }
            
            function setTurnServerTextInputValue(value) 
            {
                document.getElementById("turnServer").value=value;
            }
            
            function setTurnLoginTextInputValue(value) 
            {
                document.getElementById("turnLogin").value=value;
            }
            
            function setTurnPasswordTextInputValue(value) 
            {
                document.getElementById("turnPassword").value=value;
            }
            
            function setSipOutboundProxyTextInputValue(value) 
            {
                document.getElementById("sipOutboundProxy").value=value;
            }

            function setSipUserAgentCapabilitiesTextInputValue(value) 
            {
                document.getElementById("sipUserAgentCapabilities").value=value;
            }
            
            function setSipUriContactParametersTextInputValue(value) 
            {
                document.getElementById("sipUriContactParameters").value=value;
            }
            
            function setSipDomainTextInputValue(value) 
            {
                document.getElementById("sipDomain").value=value;
            }

            function setSipUserAgentTextInputValue(value) 
            {
                document.getElementById("sipUserAgent").value=value;
            }
            
            function setSipDisplayNameTextInputValue(value) 
            {
                document.getElementById("sipDisplayName").value=value;
            }

            function setSipUserNameTextInputValue(value) 
            {
                document.getElementById("sipUserName").value=value;
            }

            function setSipLoginTextInputValue(value) 
            {
                document.getElementById("sipLogin").value=value;
            }

            function setSipPasswordTextInputValue(value) 
            {
                document.getElementById("sipPassword").value=value;
            }

            function setSipContactTextInputValue(value) 
            {
                document.getElementById("sipContact").value=value;
            }
            
            function setAudioCodecsFilterTextInputValue(value) 
            {
                document.getElementById("audioCodecsFilter").value=value;
            }
            
            function setVideoCodecsFilterTextInputValue(value) 
            {
                document.getElementById("videoCodecsFilter").value=value;
            }
            
            function setLocalVideoFormatTextInputValue(value) 
            {
                document.getElementById("localVideoFormat").value=value;
            }
            
            function setLocalAudioFormatTextInputValue(value) 
            {
                document.getElementById("localAudioFormat").value=value;
            }
            
            function setOpusFmtpCodecsParametersTextInputValue(value) 
            {
                document.getElementById("opusFmtpCodecsParameters").value=value; 
            }
            
            function getTextInputValue(elementId) 
            {
                var value = document.getElementById(elementId).value;
                if(value=="undefined") return undefined;
                else if(value=="") return undefined;
                else return value
            }
            
            function getStunServerTextInputValue() 
            {
                return getTextInputValue("stunServer")
            }


            function getTurnServerTextInputValue() 
            {
                return getTextInputValue("turnServer")
            }
            
            function getTurnLoginTextInputValue() 
            {
                return getTextInputValue("turnLogin")
            }
            
            function getTurnPasswordTextInputValue() 
            {
                return getTextInputValue("turnPassword")
            }
            
            function getSipOutboundProxyTextInputValue() 
            {
                return getTextInputValue("sipOutboundProxy");
            }

            function getSipUserAgentCapabilitiesTextInputValue() 
            {
                return getTextInputValue("sipUserAgentCapabilities");
            }
            
            function getSipUriContactParametersTextInputValue() 
            {
                return getTextInputValue("sipUriContactParameters");
            }  
            
            function getSipDomainTextInputValue() 
            {
                return getTextInputValue("sipDomain");
            }

            function getSipUserAgentTextInputValue() 
            {
                return getTextInputValue("sipUserAgent");
            }
            
            function getSipDisplayNameTextInputValue() 
            {
                return getTextInputValue("sipDisplayName");
            }

            function getSipUserNameTextInputValue() 
            {
                return getTextInputValue("sipUserName"); 
            }

            function getSipLoginTextInputValue() 
            {
                return getTextInputValue("sipLogin");
            }

            function getSipPasswordTextInputValue() 
            {
                return getTextInputValue("sipPassword"); 
            }

            function getSipContactTextInputValue() 
            {
                return getTextInputValue("sipContact");
            }
            
            function getSipRegisterModeValue() 
            {
                return document.getElementById("sipRegistrationCkeckBox").checked;
            }
            
            function getAudioMediaValue() 
            {
                return document.getElementById("audioMediaCkeckBox").checked;
            }
            
            function getVideoMediaValue() 
            {
                return document.getElementById("videoMediaCkeckBox").checked;
            }
            
             
            function getUseStunServerValue() 
            {
                return document.getElementById("useStunServerCkeckBox").checked;
            }
             
            function getUseTurnServerValue() 
            {
                return document.getElementById("useTurnServerCkeckBox").checked;
            }
            
            function getMessageMediaValue() 
            {
                return document.getElementById("messageMediaCkeckBox").checked;
            }
            
            function getDtlsSrtpKeyAgreementValue() 
            {
                return document.getElementById("dtlsSrtpKeyAgreementCkeckBox").checked;
            }
            
            function getForceTurnMediaRelayValue() 
            {
                return document.getElementById("forceTurnMediaRelayCkeckBox").checked;
            }
            
            function getAudioCodecsFilterTextInputValue() 
            {
                return getTextInputValue("audioCodecsFilter")
            }
            
            function getVideoCodecsFilterTextInputValue() 
            {
                return getTextInputValue("videoCodecsFilter")
            }
            
            function getLocalVideoFormatTextInputValue() 
            {
                return getTextInputValue("localVideoFormat")
            }
            
            function getLocalAudioFormatTextInputValue() 
            {
                return getTextInputValue("localAudioFormat")
            }
            
            function getOpusFmtpCodecsParametersTextInputValue() 
            {
                return getTextInputValue("opusFmtpCodecsParameters")
            }
            
            
        </script>

    </head>
    <body onload='webRTCommTestWebAppController.onLoadViewEventHandler();webRTCommTestWebAppCookie.fromCookieToDocument()' onunload='webRTCommTestWebAppController.onUnloadViewEventHandler();'>
        <div id="webRTCommClientConfigurationDiv" >
            <br/>
            <input id="resetSettings" value="Default settings" onclick = "webRTCommTestWebAppCookie.deleteAllCookies();webRTCommTestWebAppController.initView();webRTCommTestWebAppCookie.fromDocumentToCookie();" type="button" > 
            <br/>
            <label style="color:black; font-weight: bold">SIP Profile settings (modification requires reconnection)</label>
            <div style="border:black solid thin; width:800px " id="webRTCommClientSipProfileConfigurationDiv"> 
                <div id='sipDisplayNameDiv'>
                    <label>SIP Display Name:</label>
                    <input id="sipDisplayName"  type="text" size="30" > 
                </div>
                <div id='sipUserNameDiv'>
                    <label>SIP User Name:</label>
                    <input id="sipUserName"  type="text" size="30"> 
                </div>
                <div id='sipLoginDiv'>
                    <label>SIP Login:</label>
                    <input id="sipLogin"   type="text" size="30"> 
                </div>
                <div id='sipPasswordDiv'>
                    <label>SIP Password:</label>
                    <input id="sipPassword"   type="text" size="30"> 
                </div>
                <div id='stunServerDiv'>
                    <label>STUN server:</label>
                    <input  id='useStunServerCkeckBox' type="checkbox" checked>
                    <input  id="stunServer"  type="text" size="20" >
                    <label style="color:red">sample: Google public STUN server:stun.l.google.com:19302</label>
                </div>
                <div id='turnServerDiv'>
                    <label>TURN server:</label>
                    <input  id='useTurnServerCkeckBox' type="checkbox" checked>
                    <input  id="turnServer"  type="text" size="20" >
                    <label>TURN login</label>
                    <input  id="turnLogin"  type="text" size="20" >
                    <label>TURN password</label>
                    <input  id="turnPassword"  type="text" size="20" >
                </div>
                <div id='forceTurnMediaRelayDiv'>
                    <label>Force TURN media relay:</label>
                    <input  id='forceTurnMediaRelayCkeckBox' type="checkbox" checked >
                </div>
                <div id='sipWsUrlDiv'>
                    <label>SIP outbound proxy WS URL:</label>
                    <input  id="sipOutboundProxy"  type="text" size="40"> 
                </div>
                <div id='sipDomainDiv'>
                    <label>SIP Domain:</label>
                    <input id="sipDomain"  type="text" size="30"> 
                </div>   
                <div id='sipUriContactParametersDiv'>
                    <label>SIP URI Contact parameters:</label>
                    <input id="sipUriContactParameters"  type="text" size="30"> 
                    <label style="color:red">sample: rtcweb-breaker=yes;....</label>
                </div> 
                <div id='sipUserAgentCapabilitiesDiv'>
                    <label>SIP User Agent Capabilities:</label>
                    <input id="sipUserAgentCapabilities"  type="text" size="30"> 
                    <label style="color:red">sample: +g.oma.sip-im;....</label>
                </div> 
                <div id='sipUserAgentDiv'>
                    <label>SIP User agent:</label>
                    <input id="sipUserAgent"  type="text" size="30"> 
                </div>   
            </div> 
            <br/>
            <label style="color:black; font-weight:bold; ">Communication settings</label>
            <div style="border:black solid thin; width:1000px" id="webRTCommClientSipCallConfigurationDiv" title="Call settings"  >
                <div id='sipContactPhoneNumberDiv'>
                    <label>SIP Contact phone number:</label>
                    <input id="sipContact"  type="text" size="30" > 
                </div>
                <div id='sipRegisterModeDiv'>
                    <label>SIP REGISTER required:</label>
                    <input  id='sipRegistrationCkeckBox' type="checkbox" checked name="sipRegistrationCkeckBox">
                </div>
                <div id='audioMediaDiv'>
                    <label>Audio media:</label>
                    <input  id='audioMediaCkeckBox' type="checkbox" checked>
                </div>
                <div id='videoMediaDiv'>
                    <label>Video media:</label>
                    <input  id='videoMediaCkeckBox' type="checkbox" checked >
                </div>
                <div id='messageMediaDiv'>
                    <label>Message media:</label>
                    <input  id='messageMediaCkeckBox' type="checkbox" checked>
                </div>
                <div id='audioCodecsFilterDiv'>
                    <label>Audio codecs filter (ordered by priority e.g. PCMU,PCMA,OPUS):</label>
                    <input id='audioCodecsFilter' type="text" size="30" >
                </div>
                <div id='videoCodecsFilterDiv'>
                    <label>Video codecs filter (ordered by priority e.g. VP8, H264):</label>
                    <input id='videoCodecsFilter' type="text" size="30" >
                </div>
                <div id='localAudioFormatDiv'>
                    <label>Local audio format:</label>
                    <input id='localAudioFormat' type="text" size="150" onchange = "webRTCommTestWebAppController.onChangeLocalAudioFormatViewEventHandler();">
                </div>
                <div id='localVideoFormatDiv'>
                    <label>Local video format:</label>
                    <input id='localVideoFormat' type="text" size="150" onchange = "webRTCommTestWebAppController.onChangeLocalVideoFormatViewEventHandler();">
                </div>
                <div id='messageMediaDiv'>
                    <label>DTLS SRTP mode:</label>
                    <input  id='dtlsSrtpKeyAgreementCkeckBox' type="checkbox" checked>
                    <label style="color:red">(ckecked: DTLS, unchecked:SDES)</label>
                </div>
                <div id='opusFmtpCodecsParametersDiv'>
                    <label>Opus fmtp codecs parameters:</label>
                    <input id='opusFmtpCodecsParameters' type="text" size="50" >
                </div>
            </div> 
            <audio id="ringing" loop src="audio/ringing.wav" />
            <audio id="ringingBack" loop src="audio/ringing.wav" />
        </div>
        <br/>
        <div id='input'>
            <input id='connectButton'  type='button' disabled value='Connect' onclick = "webRTCommTestWebAppCookie.fromDocumentToCookie();webRTCommTestWebAppController.onClickConnectButtonViewEventHandler();"/>
            <input id='disconnectButton'  type='button' value='Disconnect' disabled onclick = "webRTCommTestWebAppController.onClickDisconnectButtonViewEventHandler();"/>
            <input id='callButton'  type='button' value='Call' disabled onclick = "webRTCommTestWebAppCookie.fromDocumentToCookie();webRTCommTestWebAppController.onClickCallButtonViewEventHandler(getSipContactTextInputValue());"/>
            <input id='cancelCallButton'  type='button'  value='Cancel Call' disabled onclick = "webRTCommTestWebAppController.onClickCancelCallButtonViewEventHandler();"/>
            <input id='acceptCallButton'  type='button' value='Accept Call' disabled onclick = "webRTCommTestWebAppController.onClickAcceptCallButtonViewEventHandler();"/>
            <input id='rejectCallButton'  type='button' value='Reject Call' disabled onclick = "webRTCommTestWebAppController.onClickRejectCallButtonViewEventHandler();"/>
            <input id='endCallButton'  type='button' value='End Call' disabled onclick = "webRTCommTestWebAppController.onClickEndCallButtonViewEventHandler();"/>
            <label>Mute Local Audio:</label><input id='muteLocalAudioCheckBox' type="checkbox" onclick = "webRTCommTestWebAppController.onClickMuteLocalAudioButtonViewEventHandler(this.checked);"/>
            <label>Hide Local Video:</label><input id='hideLocalVideoCheckBox' type="checkbox"  onclick = "webRTCommTestWebAppController.onClickHideLocalVideoButtonViewEventHandler(this.checked);"/>
            <label>Mute Remote Audio:</label><input id='muteRemoteAudioCheckBox' type="checkbox" onclick = "webRTCommTestWebAppController.onClickMuteRemoteAudioButtonViewEventHandler(this.checked);"/>
            <label>Hide Remote Video:</label><input id='hideRemoteVideoCheckBox' type="checkbox"  onclick = "webRTCommTestWebAppController.onClickHideRemoteVideoButtonViewEventHandler(this.checked);"/>
            <input id='stopVideoStreamButton'  type='button' value='Stop video stream'  onclick = "webRTCommTestWebAppController.onClickStopVideoStreamButtonViewEventHandler();"/>
        </div>
        <br/>
        <div id='media'>
            <label style="color:red">Send Message: Use WebRTC DataChannel if available otherwise use SIP MESSAGE request:</label>
            <div style="position:relative;">
                
                <textarea style="color: #444;font-family: 'Courier New', monospace;font-size: 1em;height: 50px; width:400px" id="messageTextArea" disabled placeholder="Enter some text, then press Send."></textarea>
                <input  id='sendMessageButton'  style="" type='button' value='Send Message' disabled onclick = "webRTCommTestWebAppController.onClickSendMessageButtonViewEventHandler();"/>
            </div>
            <div>
                <video id="localVideo" style="height: auto; width: auto" ></video>  
                <video id="remoteVideo" style="height: auto; width: auto" ></video>
                <audio id="remoteAudio"></audio>
            </div>
        </div>
    </body>
</html>